<template>
  <div>
    <div class="search">
      <div class="input">事项编号：<el-input size="small" maxlength="20" v-model="postpage.number"></el-input></div>
      <div>
        时间：
        <el-date-picker
          v-model="value"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="getDate"
        >
        </el-date-picker>
      </div>
      <el-button type="primary" @click="search">搜索</el-button>
    </div>
    <div class="form">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="date" label="时效" align="center" width="100">
          <template slot-scope="scope">
            <div class="Signal" :style="{ '--background-color': scope.row.color }"></div>
          </template>
        </el-table-column>
        <el-table-column prop="number" label="事项编号" align="center"> </el-table-column>
        <el-table-column prop="subTypeName" label="问题类型" align="center" width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="createTime" label="上报时间" align="center"> </el-table-column>
        <el-table-column prop="location" label="事件地点" align="center" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="mdescribe" label="问题描述" align="center" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="statusName" label="事项状态" align="center"> </el-table-column>
        <el-table-column label="类型" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.returncause"><el-tag type="danger">坐席退回</el-tag></div>
            <div v-else-if="scope.row.returnNumber == 1"><el-tag type="danger">二次派遣</el-tag></div>
            <div v-else-if="scope.row.returnNumber == 2"><el-tag type="danger">三次派遣</el-tag></div>
            <div v-else-if="scope.row.returnNumber == 0 && !scope.row.returncause">
              <el-tag type="success">正常上报</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">办理</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination layout="prev, pager, next" :total="total * 10" @current-change="changesize" class="page">
        </el-pagination>
      </div>
    </div>
    <div class="confirm"></div>
    <el-drawer title="事项详情" :visible.sync="drawer" :direction="direction" :before-close="handleClose" size="55%">
      <Dispatch @Tips="Tips" :win-state="drawer" :postmessage="this.parentMessage"></Dispatch>
    </el-drawer>
  </div>
</template>

<script>
import Dispatch from './Dispatch/Dispatch.vue'
import respon from '@/api/respon'
export default {
  data() {
    return {
      total: '',
      parentMessage: {},
      direction: 'rtl',
      drawer: false,
      status: '',
      currentPage: 10,
      multipleSelection: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      options: [],
      option: [],
      tableData: [],
      postpage: {
        dutyId: '',
        endTime: '',
        location: '',
        number: '',
        pageNo: 1,
        pageSize: 9,
        responsibilityId: '',
        seatId: '',
        startTime: '',
        statusList: [],
        typeId: '',
      },
      value: [],
    }
  },
  created() {
    this.agency()
  },
  methods: {
    getDate(date) {
      this.value = date
      this.postpage.startTime = this.value[0]
      this.postpage.endTime = this.value[1]
    },
    search() {
      respon.agency(this.postpage).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.records
          this.total = res.data.totalPage
          if (res.data.records.length == 0 || res.data.records == []) {
            this.$message({
              message: '查询数据无结果！',
              type: 'info',
            })
          }
        }
      })
    },
    agency() {
      respon.agency(this.postpage).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.records
          this.total = res.data.totalPage
        }
      })
    },
    handleClose(done) {
      done()
    },

    Tips() {
      this.drawer = false
      this.agency()
      this.$message({
        message: '操作成功',
        type: 'success',
      })
    },

    changesize(row) {
      this.postpage.pageNo = row
      this.agency()
    },
    handleClick(scope) {
      this.drawer = true
      this.parentMessage = scope
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {},
  },
  mounted() {
    let currentTimer = setInterval(() => {
      respon.agency(this.postpage).then(e => {
        if (e.code == 200) {
          this.tableData = e.data.records
          this.total = e.data.totalPage
        }
      })
    }, 10000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(currentTimer)
      currentTimer = null
    })
  },
  components: {
    Dispatch,
  },
}
</script>

<style lang="scss" scoped>
@import './responsibilityAgency.scss';
</style>
